<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="`${type === 'Add' ? '新增' : '编辑'}更换记录`"
    width="700px"
    custom-class="dialog"
  >
    <el-form label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="易损件">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更换时间">
            <el-date-picker type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="6" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      type: "Add",
      currentRow: null,
      dialogVisible: false,
      options: [],
    };
  },
  methods: {
    openHandle(type, row) {
      this.type = type;
      this.currentRow = { ...row };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  .el-date-editor {
    width: 100%;
  }
}
</style>
